<template>
    <div class="content">
        <div class="avatar">
            <u--image
                v-if="userInfo && userInfo.avatar"
                :src="userInfo.avatar"
                width="176rpx"
                height="176rpx"
                :lazy-load="true"
                mode="aspectFill"
            ></u--image>
            <img v-else class="image" src="@/static/images/my/avatar.png" />
            <button class="edit" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                修改
            </button>
        </div>
        <div class="operate-list">
            <div class="operate-item" @click="toNickname">
                <div class="inner">
                    <div class="left">
                        <span class="label">昵称</span>
                        <span class="value">{{ userInfo.nickname }}</span>
                    </div>
                    <u-icon name="arrow-right" color="#979797" size="14"></u-icon>
                </div>
            </div>
            <div class="operate-item">
                <div class="inner">
                    <div class="left">
                        <span class="label">手机</span>
                        <span class="value">{{ userInfo.mobile | phoneMask }}</span>
                    </div>
                    <button
                        class="change-phone"
                        open-type="getPhoneNumber"
                        @getphonenumber="getPhoneNumber"
                    >
                        更换手机
                    </button>
                </div>
            </div>
        </div>
        <div class="footer-bar">
            <u-button
                color="#DE2239"
                ba
                plain
                text="退出登录"
                @click="logout"
                :customStyle="{ width: '100%', margin: 0, background: 'none' }"
            ></u-button>
        </div>
    </div>
</template>

<script>
import { baseUrl } from '@/utils/config';
import { mapGetters } from 'vuex';
export default {
    name: 'setting',
    computed: {
        ...mapGetters(['userInfo']),
    },
    methods: {
        onChooseAvatar(e) {
            let that = this;
            const { avatarUrl } = e.detail;
            uni.uploadFile({
                header: {
                    Authorization: 'Bearer ' + uni.getStorageSync('token'),
                    'tenant-id': 1,
                },
                url: baseUrl + '/app-api/member/user/update-avatar',
                filePath: avatarUrl,
                name: 'avatarFile',
                success: () => {
                    uni.showToast({
                        title: '更新头像成功',
                        icon: 'none',
                    });
                    that.$store.dispatch('getUserInfo');
                },
            });
        },
        toNickname() {
            uni.navigateTo({
                url: '/pages/my/nickname',
            });
        },
        getPhoneNumber(e) {
            if (!e.detail.code) {
                uni.showToast({
                    title: '您已取消更换手机',
                    icon: 'none',
                });
                return false;
            }
            this.$Api.member.auth
                .updatePhone({
                    phoneCode: e.detail.code,
                })
                .then(() => {
                    uni.showToast({
                        title: '修改手机号成功',
                        icon: 'none',
                    });
                    setTimeout(() => {
                        this.$store.dispatch('getUserInfo');
                    }, 2000);
                });
        },
        logout() {
            let that = this;
            uni.showModal({
                title: '提示',
                content: '您确定要退出登录吗？',
                success(res) {
                    if (res.confirm) {
                        that.$Api.member.auth.logout().then(() => {
                            uni.clearStorageSync();
                            uni.reLaunch({
                                url: '/pages/home/index',
                            });
                        });
                    }
                },
            });
        },
    },
    filters: {
        phoneMask(val) {
            return val.substring(0, 3) + '****' + val.substr(val.length - 4);
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    .avatar {
        width: 176rpx;
        height: 176rpx;
        border-radius: 50%;
        overflow: hidden;
        margin: 60rpx auto;
        position: relative;
        .image {
            width: 176rpx;
            height: 176rpx;
        }
        .edit {
            width: 100%;
            height: 52rpx;
            position: absolute;
            bottom: 0;
            left: 0;
            background: rgba(47, 47, 47, 0.6);
            text-align: center;
            line-height: 52rpx;
            font-size: 24rpx;
            color: #fff;
        }
    }
    .operate-list {
        width: 690rpx;
        background: #fff;
        margin: 20rpx auto 0;
        border-radius: 24rpx;
        box-sizing: border-box;
        .operate-item {
            padding: 0 32rpx;
            transition: 0.5s;
            .inner {
                padding: 32rpx 0;
                border-bottom: 1rpx solid #e5e5e5;
                @include flexBox(space-between, center);
            }
            &:last-child {
                .inner {
                    border-bottom: none;
                }
            }
            &:active {
                background: #f3f4f6;
            }
            .left {
                font-size: 28rpx;
                font-weight: 600;
                color: #2f2f2f;
                @include flexBox(flex-start, center);
                .value {
                    margin-left: 32rpx;
                    font-weight: 500;
                }
            }
        }
    }
    .footer-bar {
        width: 100%;
        margin-top: 60rpx;
    }
    .change-phone {
        height: 52rpx;
        line-height: 52rpx;
        color: #5c5c5c;
        font-size: 24rpx;
        background: none;
        border-radius: 50rpx;
        margin: 0;
        border: 1rpx solid #e5e5e5;
    }
}
</style>
